<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>bootstrap 初体验</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body style="height: 2000px;">
    <div class="container">
      <h2>分页</h2>
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>

      <h2>标签</h2>
      <span class="label label-default">篮球</span>
      <span class="label label-primary">唱</span>
      <span class="label label-success">跳</span>
      <span class="label label-info">rap</span>
      <span class="label label-warning">Warning</span>
      <span class="label label-danger">Danger</span>

      <h2>徽章</h2>
      <button class="btn btn-primary" type="button">
        收件箱 <span class="badge">4</span>
      </button>

      <h2>巨幕</h2>
      <div class="jumbotron">
        <h2>繁花上架啦~~~</h2>
        <p>胡歌与辛芷蕾, 唐嫣, 马伊琍的纠葛</p>
        <p><a class="btn btn-primary btn-md" href="#" role="button">立即查看</a></p>
      </div>

      <h2>缩略图</h2>
      <div class="row">
        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="holder.js/100px150?bg=#c67" alt="...">
          </a>
        </div>
        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="holder.js/100px150?bg=#c67" alt="...">
          </a>
        </div>
        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="holder.js/100px150?bg=#c67" alt="...">
          </a>
        </div>
        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="holder.js/100px150?bg=#c67" alt="...">
          </a>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
            <div class="caption">
              <h4>山地自行车</h4>
              <p><a href="#" class="btn btn-primary" role="button">加入购物车</a> <a href="#" class="btn btn-default" role="button">立即购买</a></p>
            </div>
          </div>
        </div>
        
      </div>

      <h2>警告框</h2>
      <div class="alert alert-success" role="alert">
        恭喜恭喜, 您中的双色球彩票大奖🤗🤗
      </div>

      <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
      </div>

      <h2>进度条</h2>
      <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
          <span class="sr-only">45% Complete</span>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.8/holder.min.js"></script>
    
  </body>
</html>
